<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="renderer" content="webkit">
    <title>艾玛英语</title>
    <!-- ================== BASE CSS STYLE ================== -->
    <link rel="stylesheet" href="__PATH__/assets/css/base.css">
    <!-- ================== / BASE CSS STYLE ================== -->
    <!-- ================== PAGE CSS STYLE ================== -->
</head>

<body>
    <div id="main" class="today-tutorial">
        <span class="date-tag">
            Day<br>{$day_num}
        </span>
        <div class="new-word-box">
            <div class="word-img">
                <img src="{$member.person_img}" alt="">
            </div>
            <div class="info">
                <strong>{$book_data['title']}</strong>
                <ul class="statistics">
                    <li>
                        <span>{$word_num}</span>
                        单词
                    </li>
                    <li>
                        <span>6</span>
                        评论
                    </li>
                    <li>
                        <a class="read" href="javascript:;">
                            跟读
                        </a>
                        <div id="jquery_jplayer_1" class="jp-jplayer" style="display: none"></div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="cloud-nav">
            <a href="{:url('wechat/study_word')}">学单词</a>
            <a href="{:url('wechat/computer')}">游戏</a>
            <a href="javascript:;">闯关</a>
            <a href="{:url('wechat/book_content')}">绘本</a>
        </div>
    </div>
    <nav id="navigator">
        <ul>
            <li class="active"><a href="{:url('wechat/index')}">今日学习</a></li>
            <li><a href="{:url('wechat/study_recorde')}">学习记录</a></li>
            <li><a href="{:url('wechat/book')}">听绘本</a></li>
            <li><a href="{:url('wechat/my')}">我的</a></li>
        </ul>
    </nav>


    <!-- ================== BASE JS ================== -->
    <script src="__PATH__/assets/js/jquery-1.9.1.min.js"></script>
    <script src="__PATH__/assets/js/plugin/jquery.jplayer.min.js"></script>
    <script src="__PATH__/assets/js/common.js"></script>
    <!-- ================== / BASE JS ================== -->
    <!-- ================== PAGE LEVEL JS ================== -->
    <script>
    $(document).ready(function() {
        $("#jquery_jplayer_1").jPlayer({
            ready: function (event) {
                $(this).jPlayer("setMedia", {
                    title: "Fly Me To The Moon",
                    mp3: "{$book_data['audio']}",
                });
            },
            swfPath: "__PATH__/assets/js/plugin/jquery.jplayer.swf",
            supplied: "mp3"
        });
        $('.statistics .read').click(function() {
            if($(this).hasClass('active')) {
                $(this).removeClass('active');
                $('#jquery_jplayer_1').jPlayer('pause');
            }
            else {
                $(this).addClass('active');
                $('#jquery_jplayer_1').jPlayer('play');
            }
        });
    });
    </script>
    <!-- ================== / PAGE LEVEL JS ================== -->
</body>

</html>
